<template>
  <div class="home">
    <div class="tops">
      <!-- $router.push('home/popup')  路由跳转 -->
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        shape="round"
        @click="$router.push('home/popup')"
      />
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in imgArr" :key="index">
          <img :src="item.image_url" alt="" />
        </van-swipe-item>
      </van-swipe>

      <van-grid>
        <van-grid-item
          :icon="item.icon_url"
          :text="item.name"
          v-for="(item, index) in iconArr"
          :key="index"
        />
      </van-grid>
    </div>

    <Comp />
    <router-view></router-view>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import Comp from "@/components/Comp1.vue";


import { getData } from "@/request/api";

export default {
  name: "Home",
  data() {
    return {
      value: "",
      imgArr: [],
      iconArr: [],
      photoArr: [],
      photo2Arr: [],
      photo3Arr: [],
      photo4Arr: [],
    };
  },
  components: {
    Comp
  },
  created() {
    getData()
      .then((res) => {
        // console.log(res.data);
        this.imgArr = res.data.banner;
        this.iconArr = res.data.channel;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods:{
    btn(){

    }
  }
};
</script>

<style>
.tops,
.c1,
.c2,
.c3,
.c4,
.tong {
  background: #fff;
}
.tops {
  margin-bottom: 0.2rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 200px; */
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe-item img {
  width: 100%;
  display: block;
}
.van-grid-item {
  flex-basis: 20% !important;
}
.c1 p,
.c2 p {
  display: block;
  padding: 0.2rem;
}
.c1 ul,
.c2 ul {
  display: flex;
  flex-wrap: wrap;
}
.c1 li,
.c2 li {
  width: 50%;
  position: relative;
}
.c1 li p,
.c2 li p {
  padding: 0.05rem;
}
.c1 li img,
.c2 li img {
  width: 100%;
}
.c1 .box {
  position: absolute;
  top: 0;
}
.c2,
.c3,
.c4 {
  margin-top: 0.15rem;
}
.c3 ul {
  display: flex;
}
.c3 li {
  flex: 1.5;
}
.c3 li img {
  width: 100%;
}
.c3 p {
  padding: 0.2rem;
}
.c3 li h3,
.c3 li p {
  text-align: left;
  padding: 0.1rem;
}
.c3 .custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.c4 .van-swipe__track {
  width: 100%;
  height: 3rem;
}
.c4 .van-swipe__track img {
  width: 100%;
  height: 75%;
}
.c4 .ct {
  text-align: left;
}
.c4 .ctbox {
  display: flex;
  font-size: 0.17rem;
  font-weight: bold;
  padding: 0.13rem 0;
}
.c4{
  padding-bottom: 0.1rem;
}
</style>
